<!-- @format -->
<script setup>
  import {
    diamondList,
    filterTypeMap,
    filterTypeList
  } from '@/constants/home'

  import { useLocationStore } from '@/stores'
  import { ref } from 'vue'
  const locationStore = useLocationStore()

  // uni.upx2px()： 把 upx/rpx 转换成相应的 px，该方法会根据不同的手机机型自动适配
  // 记录筛选位距离顶部导航的高度
  const offsetTop = uni.upx2px(453)
  // 记录是否要固定定位在顶部
  const isFixedTop = ref(false)

  // 关联 scroll-view 组件滚动到的元素 id
  const scrollIntoView = ref(null)
  // scroll-view 滚动事件
  const onScroll = (e) => {
    // e.detail.scrollTop: 滚动高，单位是 px
    // 如果滚动高大于等于筛选位距离顶部的距离，说明已经滚动到了筛选位了，则需要吸顶了；反之就不吸顶
    isFixedTop.value = e.detail.scrollTop >= offsetTop
    // 如果没有吸顶，需要把 scrollIntoView 设置为null
    if (!isFixedTop.value) {
      scrollIntoView.value = null
    }
  }

  const visible = ref(false)

  // 点击筛选项时
  const onFilterClick = (item) => {
    // 把 isFixedTop 设置为 true
    isFixedTop.value = true
    // 让 scroll-view 组件滚动到筛选位的位置
    scrollIntoView.value = 'indexFilterViewId'
    // 把其他的item的isOpen设置为false
    filterTypeList.value.forEach((item) => {
      item.isOpen = false
    })
    // 把 item的 isOpen 设置为true
    item.isOpen = true
    visible.value = true
  }
</script>

<template>
  <!-- 顶部导航栏 -->
  <bit-nav-bar title="比特租房">
    <template #left>
      <text class="index-city">
        {{ locationStore.location.name }}
      </text>
      <bit-icon name="xiala-dark" size="24" />
    </template>
  </bit-nav-bar>
  <!-- 
    view: 视图容器，类似于div
    scroll-view: 可滚动的容器
  -->
  <!-- 可滚动的 scroll-view -->
  <scroll-view
    class="index"
    scroll-y
    :scroll-into-view="scrollIntoView"
    @scroll="onScroll"
    :class="{
      active: isFixedTop
    }"
  >
    <!-- banner位 -->
    <view class="index-banner">
      <image
        src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/home/banner.png"
        mode="scaleToFill"
        class="index-banner__image"
      />
    </view>
    <!-- 金刚位 -->
    <view class="index-diamond">
      <view
        class="index-diamond-item"
        v-for="item in diamondList"
        :key="item.id"
      >
        <!-- 图标 -->
        <bit-icon :name="item.iconPath" size="100" />
        <!-- 文本 -->
        <text class="text">{{ item.title }}</text>
      </view>
    </view>
    <!-- 筛选位 -->
    <view
      class="index-filter"
      id="indexFilterViewId"
      :class="{
        fixedTop: isFixedTop
      }"
    >
      <view
        class="index-filter-item"
        v-for="item in filterTypeList"
        :key="item.id"
        @click="onFilterClick(item)"
      >
        <view class="text">{{ item.title }}</view>
        <bit-icon
          :name="item.isOpen ? 'zhankai' : 'xiala-light'"
          size="24"
        />
      </view>
    </view>
    <!-- 房源列表位 -->
    <view class="index-houseList" :class="{ active: isFixedTop }">
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
      <bit-house-item />
    </view>
  </scroll-view>

  <!-- 弹出层组件：显示筛选面板 -->
  <bit-popup v-model="visible" :showConfirmButton="true">
    <view>小比特大梦想1</view>
    <view>小比特大梦想2</view>
  </bit-popup>
</template>

<style lang="scss">
  @import '@/styles/mixins.scss';
  // 导航栏城市名称
  .index-city {
    margin-right: 8rpx;
    font-size: $font-size-md-28;
    color: $font-color-dark;
  }
  // 主体内容
  .index {
    position: fixed;
    top: 176rpx;
    bottom: 0;
    padding: 0 30rpx;
    background: $bg-color-shallow;
    &.active {
      padding: 0;
    }
    // banner位
    &-banner {
      padding-top: 30rpx;
      &__image {
        width: 690rpx;
        height: 222rpx;
      }
    }
    // 金刚位
    &-diamond {
      display: flex;
      justify-content: space-between;
      width: 690rpx;
      margin: 28rpx 0 30rpx;
      // 每一项
      &-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text {
          margin-top: 8rpx;
          font-size: $font-size-sm-24;
          color: $font-color-dark;
        }
      }
    }
    // 筛选位
    &-filter {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 690rpx;
      height: 88rpx;
      margin-bottom: 20rpx;
      padding: 0 44rpx 0 50rpx;
      border-radius: 16rpx;
      background: $bg-color-white;
      &.fixedTop {
        box-sizing: border-box;
        position: fixed;
        top: 176rpx;
        left: 0;
        width: 100%;
        border-radius: 0;
      }
      &-item {
        display: flex;
        .text {
          margin-right: 3rpx;
          font-size: $font-size-sm-26;
          color: $font-color-dark;
        }
      }
    }
    // 房源列表位
    &-houseList {
      width: 690rpx;
      padding-bottom: 5rpx;
      &.active {
        box-sizing: border-box;
        width: 750rpx;
        margin-top: 128rpx;
        padding: 0 30rpx 5rpx;
      }
    }
  }
</style>
